<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layOut="http://www.w3.org/1999/xhtml"
      layOut:decorator="layOut/layOut">
<head>
    <title>菜单新增</title>
    <style>
        .main-container .layui-form-item {
            padding-right: 45px;
        }
    </style>
</head>
<body>
<form class="layui-form" id="theForm">
    <div class="mainBox" th:fragment="theForm">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label" for="name">菜单名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" th:value="${menu.name}" lay-verify="required" lay-reqtext="菜单名不能为空"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="parentName">父级菜单</label>
                <div class="layui-input-block">
                    <input type="hidden" id="parentId" name="parentId" th:value="${menu.parentId}" />
                    <input type="text" name="parentName" id="parentName" th:value="${menu.parentName}" lay-verify="required"
                           autocomplete="off" placeholder="请输入" class="layui-input" readonly lay-reqtext="父级菜单不能为空">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="type">类型</label>
                <div class="layui-input-block">
                    <input type="text" name="type" id="type" th:value="${menu.type}" lay-verify="required" lay-reqtext="类型不能为空"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="permission">权限</label>
                <div class="layui-input-block">
                    <input type="text" name="permission" id="permission" th:value="${menu.permission}"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="href">路径</label>
                <div class="layui-input-block">
                    <input type="text" name="href" id="href" th:value="${menu.href}"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="icon">图标</label>
                <div class="layui-input-block">
                    <input type="text" name="icon" id="icon" th:value="${menu.icon}"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="orderNum">排序号</label>
                <div class="layui-input-block">
                    <input type="text" name="orderNum" id="orderNum" th:value="${menu.orderNum}"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom" th:fragment="theBtn">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="completeFilter">
                <i class="layui-icon layui-icon-ok"></i>提交
            </button>
        </div>
    </div>
</form>
<script type="text/javascript" th:inline="javascript">
    const parentId = [[${parentMenu.id}]];
    const parentName = [[${parentMenu.name}]];
</script>
<script type="text/javascript">
    layui.use(['form','jquery'], function() {
        let form = layui.form;
        let $ = layui.jquery;

        form.on('submit(completeFilter)', function(data) {
            var fromData = $("#theForm").serialize();
            $.post("/menu/add" ,fromData ,function (data) {
                if (data.status === 200) {
                    console.log("成功返回")
                }
                layer.msg(data.msg, {
                    icon: 1,       //信息框与加载层的私有参数
                    time: 1500
                }, function () {   //关闭弹出框后执行的函数
                    console.log("后端返回" + data.msg)
                    const index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index)
                });
            });
            return false;
        });

        $("#parentId").val(parentId)
        $("#parentName").val(parentName)
    })
</script>
</body>
</html>